import { createSlice, configureStore, createAsyncThunk } from "@reduxjs/toolkit"



//关于异步的操作
//第一个参数  随便取名字
//第二个参数  函数
export let changenumThunk = createAsyncThunk('changenumThunk', async (params) => {
    let res = await new Promise((resolive) => {
        console.log(params)
        setTimeout(() => {
            resolive(999)
        }, 2000)
    })
    return res
})



let msgSlicce = createSlice({
    name: 'msgSlicce',
    //定义初始值
    initialState: {
        msg: "hello"
    },
    //定义方法
    reducers: {
        changeMsg(state, action) {
            state.msg = action.payload
        }
    }
})

let numSlicce = createSlice({
    name: "numSlicce",
    //定义初始值
    initialState: {
        num: 10
    },
    //定义方法
    reducers: {
        addNum(state, action) {
            state.num += 1
        },
        // 异步
        // changenum(state){
        //     setTimeout(()=>{
        //         state.num = 999
        //     },2000)
        // }
    },
    // extraReducers:(chunk)=>{
    //     chunk.addCase(changenumThunk.pending,()=>{
    //         console.log('pendding')
    //     })
    //     .addCase(changenumThunk.fulfilled,(state,action)=>{
    //         state.num = action.payload
    //     })
    // }

    extraReducers:{
        [changenumThunk.pending]:()=>{
            console.log('pendding')
        },
        [changenumThunk.fulfilled]:(state,action)=>{
            state.num = action.payload
        }
    }

})

export let { changeMsg } = msgSlicce.actions

export let { addNum, changenum } = numSlicce.actions

let store = configureStore({
    reducer: {
        Msgreducer: msgSlicce.reducer,
        Numreducer: numSlicce.reducer
    }
})


export default store

